<template>
    <NewsTopBack/>
    <div style="margin: 0 3%" class="articleContainer">
        <DetailNewsHead :headData="{date: date, category:category, title:commonTitle}"/>
        <div class="article">
            <img :src="pic" alt="" id="articleImg01">
            <p v-html="content"></p>
        </div>
    </div>
</template>

<script setup>
import NewsTopBack from "@/views/AboutUs/components/news/NewsTopBack.vue";
import DetailNewsHead from "@/views/AboutUs/components/news/DetailNewsHead.vue";

defineProps(['commonTitle', 'category', 'date', 'pic', 'content'])
</script>

<style scoped>
.article #articleImg01 {
    display: block;
    width: 80%;
    margin: 32px auto;

}

.article p {
    width: 50%;
    font-size: 19px;
    line-height: 2;
    margin: 10px auto 25px auto;
}

.article p:last-child {
    margin-bottom: 50px;
}
</style>